<template>
    <div id="app" class="app-container">
      <main class="main-content">
        <section class="hero-section">
          <div class="hero-content">
            <h1>关于我们</h1>
            <p>了解柿子文档的故事和使命</p>
          </div>
        </section>
        <section class="about-section">
          <h2>我们的故事</h2>
          <p>柿子文档成立于2023年，旨在为用户提供一个高效、便捷的在线文档管理平台。我们的团队由一群热爱技术且致力于改善工作效率的人组成。</p>
          <p>我们相信，在数字化时代，每个人都有权利获得简单易用的工具来组织和分享知识。因此，我们不断努力开发和完善柿子文档，力求满足用户的各种需求。</p>
        </section>
        <section class="mission-section">
          <h2>我们的使命</h2>
          <p>我们的使命是通过技术创新，提升每个人的文档管理和协作效率，让知识共享变得轻松愉快。</p>
          <p>我们致力于提供稳定可靠的服务，持续优化用户体验，帮助用户更好地完成工作和个人学习任务。</p>
        </section>
        <section class="team-section">
          <h2>我们的团队</h2>
          <div class="team-members">
            <div class="team-member">
              <img src="https://zh.minecraft.wiki/images/Pig_JE3_BE2.png" alt="Team Member 1" class="team-avatar">
              <h3>张三</h3>
              <p>创始人 & CEO</p>
            </div>
            <div class="team-member">
              <img src="https://zh.minecraft.wiki/images/Cow_JE5_BE2.png" alt="Team Member 2" class="team-avatar">
              <h3>李四</h3>
              <p>CTO</p>
            </div>
            <div class="team-member">
              <img src="https://zh.minecraft.wiki/images/White_Sheep_JE3_BE6.png" alt="Team Member 3" class="team-avatar">
              <h3>王五</h3>
              <p>CPO</p>
            </div>
          </div>
        </section>
      </main>
    </div>
  </template>
  
  <script>
  export default {
    name: 'AboutPage',
  };
  </script>
  
  <style>
  .app-container {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: #333;
    background-color: white;
  }
  
  .main-content {
    padding: 20px;
    max-width: 1200px;
    margin: 0 auto;
  }
  
  .hero-section {
    text-align: center;
    padding: 100px 0;
    background-color: #FFECB3; /* 淡橘色背景 */
    color: #333;
  }
  
  .hero-content {
    max-width: 800px;
    margin: 0 auto;
  }
  
  .about-section, .mission-section, .team-section {
    padding: 50px 20px;
    text-align: center;
  }
  
  .team-members {
    display: flex;
    justify-content: center;
    gap: 40px;
    flex-wrap: wrap;
  }
  
  .team-member {
    text-align: center;
  }
  
  .team-avatar {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 10px;
  }
  
  .team-member h3 {
    margin-top: 0;
    font-size: 1.5em;
    color: #333;
  }
  
  .team-member p {
    margin: 5px 0 0 0;
    color: #666;
  }
  </style>
  
  
  
  